<template>
	<view>
		<!-- <view class="topp">
			<view class="tab" ><view class="tabb " @click="tab_action(1)"><text :class="tab==1?'on':''">审核中</text></view></view>
			<view class="tab" ><view class="tabb" @click="tab_action(2)"><text :class="tab==2?'on':''">已通过</text></view></view>
			<view class="tab" ><view class="tabb" @click="tab_action(3)" style="border: 0rpx;"><text :class="tab==3?'on':''">未通过</text></view></view>
		</view> -->
		
		<view class="box" v-for="(item,index) in list">
			<view class="title" @click="info(item)" >【{{item.level}}-{{item.sex}}-{{item.zhiye}}-{{item.jineng}}】</view>
			<view class="flex" @click="info(item)">
				<view class="tab font24" style="width: 20%;color: red;">{{item.price}}元</view>
				<view class="tab font24" style="width: 55%;opacity: 0.5;">{{item.game}}｜{{item.device}}</view>
				<view class="tab font24" style="width: 20%;text-align: right;opacity: 0.5;">{{item.create_at}}</view>
			</view>
			<view class="line"></view>
			<view class="flex" style="margin-top: 20rpx;padding-bottom: 20rpx;">
				<view class="tab font18" style="width: 57%;display: flex;height: 40rpx;">
					
				</view>
				<view class="tab font18" style="width: 40%;display: flex;height: 40rpx;">
					<view  @click="edit(item)"  style="width: 45%;display: flex;justify-content: end;height: 40rpx;">
						
					</view>
					<view @click="cancel(item.id)" style="width: 50%;display: flex;justify-content: end;height: 40rpx;">
						<view style="height: 40rpx;">	
							<image src="../../static/my/collect.png" mode="widthFix" style="width: 20rpx;margin: 10rpx;height: 20rpx;"></image>
						</view>
						<view style="height: 40rpx;line-height: 40rpx;">取消</view>
					</view>
				</view>
			</view>
			
		</view>
		<view style="height: 200rpx;"></view>
		
		<view class="zhezhao" @click="sub_false" v-if="is_sub==true"></view>
		<view class="piliang"  v-if="is_sub==true">
			<view class="top" style="border-radius: 30rpx;">
				<image mode="widthFix" src="../../static/bohui.png" style="width: 100%;border-radius: 30rpx;"></image>
			</view>
			<view class="top_text2">{{reason}}</view>
			<view class="btn_text" style="display: flex;width: 100%;margin-left: 0%;">
				<view class="btn2" @click="sub_false" style="background-color:#fff;color:#000;text-align: center;border:1px solid #ccc;margin-left: 18%;margin-right: 2%;">
				  关闭弹窗
				</view>
				<view class="btn2"  @click="edit(item)"  style="margin-left: 2%;text-align: center;">
				  编辑修改
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:'1',
				is_sub:false,
				reason:'',
				list:[]
			};
		},
		onLoad() {
			this.my_fabu()
		},
		methods: {
			info(item){
				uni.navigateTo({
					url:'/pages/index/info?item='+JSON.stringify(item)
				})
			},
			tab_action(e) {
				this.tab = e
				this.my_fabu()
			},
			sub_true(item){
				this.is_sub=true
				this.reason = item.shenhe_reason  
			},
			sub_false(){
				this.is_sub=false
			},
			my_fabu(){
				var that = this
				if(!uni.getStorageSync('member')){
					 uni.showToast({ title: '请登录！', icon: 'none' });
					 setTimeout(function(){
						 uni.navigateTo({
							url:'/pages/my/login'
						 })
					 },2000)
					return
				}
				var member = uni.getStorageSync('member')
				var that = this
				uni.request({
					url:getApp().globalData.host+'srapi/home/my_collect',
					method:'POST',
					data: { // 请求的参数
						member_id:member.id
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.list = res.data.data
					}
				})
			},
			edit(item){
				uni.navigateTo({
					url:'/pages/index/save?item='+JSON.stringify(item)
				})
			},
			cancel(id){
				var that = this
				var member = uni.getStorageSync('member')
				
				uni.showModal({
				    title: '提示',
				    content: '确定要取消收藏吗？',
				    success: function (res) {
				      if (res.confirm) {
						 uni.request({
						 	url:getApp().globalData.host+'srapi/home/cancel_collect',
						 	method:'POST',
						 	data: { // 请求的参数
						 		fabu_id:id,member_id:member.id
						 	},
						 	header: { // 设置请求的header
						 		'content-type': 'application/json' // 默认值
						 	},
						 	success: (res) => {
								uni.showToast({
									title:'取消成功'
								})
						 		that.my_fabu()
						 	} 
						  })
					  }
					},
				})
			}
		}
	};
</script>

<style>
	/* #ifdef H5 */
		page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
		/* #endif */
		
		page {
		    padding-bottom: 0rpx;
		}
		
		.topp{
			width:100%;
			background-color: #fff;
			height: 73rpx;
			display: flex;
		}
		.tab{
			width: 33%;height: 73rpx;
		}
		.tabb{
			border-right: 1px solid #ccc;margin-top: 15rpx;width: 100%;text-align: center;font-size: 28rpx;color: #2A2C32;
		}
		.on{
			color: #609DF6;border-bottom: 1px solid #609DF6; padding-bottom: 10rpx;
		}
		.box{
			width: 94%;background-color: #fff; border-radius: 20rpx;height: auto; margin-top: 30rpx; margin-left: 3%;
		}
		.title{
			font-size: 28rpx;font-weight: 500;padding-top: 30rpx;margin-left: 15rpx;
		}
		.flex{
			width: 100%;display: flex;margin-top: 30rpx;
		}
		.font18{
			font-size: 18rpx;color: #000;color: #2f2f2f; text-align: center;height: auto;
		}
		.font24{
			font-size: 24rpx;color: #000;color: #2f2f2f; text-align: center;height: auto;
		}
		.line{
			width: 100%;
			border-bottom: 1px #eee solid;
			margin-top: 15rpx;
		}
		
		.zhezhao{
		  width: 100%;height: 100%; position: fixed; top: 0%; left: 0%; background-color: #000; opacity: 0.8;z-index: 100;
		}
		
		.piliang{
			z-index: 101;
		  width: 80%;
		  height: 700rpx;
		  background-color:#fff;
		  border-radius: 32rpx;
		  left: 10%;
		  top: 250rpx;
		  position: fixed;
		}
		.top{
			width: 100%;
			height: 150rpx;
		}
		.top_text{
		  width: 100%;font-size: 50rpx;text-align: center;color:#336CFE;font-weight: 700;left: 0%;
		  top: 550rpx;
		  position: fixed;
		}
		.top_text2{
			width: 100%;font-size: 24rpx;text-align: center;color:#2A2C32;font-weight: 500;left: 0%;
			top: 550rpx;
			position: fixed;
		}
		.btn_text{
			width: 100%;font-size: 24rpx;text-align: center;left: 0%;
			top: 750rpx;
			position: fixed;
		}
		.btn2{
			z-index: 101;
		  background: #3475f3;
		  border-radius: 29rpx;
		  width: 30%;
		  height: 72rpx;
		  margin: auto;
		  margin-top: 30rpx;
		  color: #fff;
		  line-height: 72rpx;
		  font-size: 24rpx;
		  text-align: center;
		}
</style>